<template>
    <div class="container-sure">
        <!-- 顶部 -->
        <van-nav-bar
            title="实名认证"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <!-- 表单区域 -->
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <!-- 通过 pattern 进行正则校验 -->
            <!-- 电话号码 -->
            <van-field
                v-model="sureForm.acctName"
                name="phoneNum"
                label="姓名"
                placeholder="请输入真实姓名"
                :rules="[
                    { required: true,message: '请输入姓名'},
                    { pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\s]{1,20})$/, message: '姓名格式错误' },
                ]"
            />
            <!-- 身份证 -->
            <van-field
                v-model="sureForm.certId"
                name="certId"
                label="身份证号"
                placeholder="请输入身份证号"
                :rules="[
                    { required: true,message: '请输入身份证号码'},
                    { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '身份证号码格式错误' },
                ]"
            />
            <!-- 银行卡号 -->
            <van-field
                v-model="sureForm.acctPan"
                name="acctPan"
                label="银行卡号"
                placeholder="请输入银行卡号"
                :rules="[
                    { required: true,message: '请输入银行卡号'},
                    {  pattern: /^(\d{16}|\d{19}|\d{17})$/, message: '银行卡号格式错误' },
                ]"
            />
            <!-- 身份证正面 -->
            <div class="card-item">
                <div class="card-name">
                    身份证正面
                </div>
                <van-uploader multiple v-model="fileList1" @delete="deleteimg1"  :max-count="1" :after-read="afterRead1" />
            </div>
            <!-- 身份证背面 -->
            <div class="card-item">
                <div class="card-name">
                    身份证背面
                </div>
                <van-uploader multiple v-model="fileList2" @delete="deleteimg2" :max-count="1" :after-read="afterRead2" />
            </div>
            <!-- 电话号码 -->
            <van-field
                v-model="sureForm.phoneNum"
                name="phoneNum"
                label="电话号码"
                placeholder="请输入电话号码"
                :rules="[
                    { required: true,message: '请输入电话号码'},
                    {  pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确号码' },
                ]"
            >
                <template #button>
                    <div class="code-btn" v-if="codeOpen" @click="getcodebyClick">点击获取</div>
                    <div class="code-btn on clearfix" v-else>
                        <span>重新获取</span>
                        <CountDown ref="countdown" :time="60" @onFinish="countDownFinished"></CountDown>
                    </div>
                </template>
            </van-field>
            <!-- 验证码 -->
            <van-field
                v-model="sureForm.authCode"
                name="authCode"
                label="验证码"
                type="number"
                placeholder="请输入验证码"
                :rules="[
                    { required: true,message: '请输入验证码'},
                    { pattern: /^[0-9]+$/, message: '请校验验证码' },
                ]"
            />
            <div class="login-btn">
                <van-button class="btn" round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import {mapActions,mapState} from "vuex"
import CountDown from 'vuejs-count-down'
import{makesurePerson,getCode,getMoneyCode,upload} from "@/api/user"
import{getuserInfo} from "@/api/login"
export default {
    components: {
        CountDown
    },
    data(){
        return{
            sureForm:{
                phoneNum:"",
                certId:"",
                acctName:"",
                // 银行卡号
                acctPan:"",
                authCode:null,
                // 身份证正面
                salesManCertification:"",
                // 身份证背面
                salesManCertificationBack:""
            },
            // 验证码开关
            codeOpen:true,
            fileList1:[],
            fileList2:[]
        }
    },
    computed:{
        ...mapState(["token"]),
        // 上传图片的接口地址（生产环境跟开发环境不一样）
        FILE_UPLOAD_URL() {
            let protocol = window.location.protocol;
            let host = window.location.host;
            if (protocol && host) {
                return protocol + "//" + host +process.env.VUE_APP_FILE_UPLOAD_URL;
            }
        },
    },
    methods:{
        ...mapActions(["SaveUserInfo"]),
        // 获取验证码
        getcodebyClick(){
            if(!this.sureForm.phoneNum){
                this.$toast("请输入手机号");
                return
            }
            else if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.sureForm.phoneNum))){
                this.$toast("请输入正确的手机号");
                return
            }
            else{
                getCode({userTelephone:this.sureForm.phoneNum}).then(res=>{
                    console.log(res)
                })
            }
            this.codeOpen=false
        },
        // 倒计时结束事件
        countDownFinished() {
            this.codeOpen=true       
        },
        // 身份证正面上传事件
        afterRead1(fileObj){
            // 上传状态
            fileObj.status = 'uploading';
            // 状态提示
            fileObj.message = '上传中...';
            console.log(this.FILE_UPLOAD_URL)
            let uploadFormData = new FormData();
            uploadFormData.append('file',fileObj.file)
            upload(this.FILE_UPLOAD_URL,uploadFormData,{"Content-Type": "multipart/form-data",idCard:1}).then(res=>{
                console.log(res)
                this.sureForm.salesManCertification=res.filePath
                this.fileList1[0].url=res.filePath
                // 上传成功
                fileObj.status = 'done';
            })

        },
        // 身份证背面上传事件
        afterRead2(fileObj){
            // 上传状态
            fileObj.status = 'uploading';
            // 状态提示
            fileObj.message = '上传中...';
            console.log(this.FILE_UPLOAD_URL)
            let uploadFormData = new FormData();
            console.log(fileObj.file)
            uploadFormData.append('file',fileObj.file)
            upload(this.FILE_UPLOAD_URL,uploadFormData,{"Content-Type": "multipart/form-data",idCard:1}).then(res=>{
                console.log(res)
                this.sureForm.salesManCertificationBack=res.filePath
                this.fileList2[0].url=res.filePath
                // 上传成功
                fileObj.status = 'done';
            })
        },
        // 身份证正面 删除
        deleteimg1(){
            this.sureForm.salesManCertification=""
        },
        // 身份证背面 删除
        deleteimg2(){
            this.sureForm.salesManCertificationBack=""
        },
        // 表单失败
        onFailed(errorInfo,values) {
            console.log('failed', errorInfo);
        },
        // 表单成功
        onSubmit(values){
            console.log(values)
            const{sureForm}=this
            if (values) {
                makesurePerson(this.sureForm).then(res1=>{
                    if(res1==1){
                        this.$toast.success("认证成功")
                        this.$router.push({path:"/user"})
                        getuserInfo().then(res2=>{
                            console.log(res2)
                            // 将信息更新到Vuex
                            this.SaveUserInfo(res2)
                        })
                    }
                    else{
                        // this.$refs.sureForm.resetFields();
                    }
                }).catch(error=>{
                    //  this.$refs.sureForm.resetFields();
                })
            } else {
                // this.$message.error('提交失败');
                // this.$refs.sureForm.resetFields();
                return false;
            }
        },
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
    }
}
</script>
<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
// 输入框样式
/deep/.van-cell__title.van-field__label{
    font-weight: 600;
}
/deep/.van-field__control{
    // 输入框光标颜色
    caret-color: black;
}
.van-cell{
    border-bottom: 1px solid #ddd;
    line-height: 0.5rem;
}
.van-cell::after{
    display: none;
}
/deep/ .van-field__control::placeholder{
    color: #ddd;
}
// 验证码按钮
.code-btn{
    position: absolute;
    right:15px;
    top: 50%;
    transform: translate(0,-50%);
    width: 0.9rem;
    height: 0.23rem;
    border-radius: 12px;
    font-size: 0.14rem;
    color: #fff;
    background-color: #FF7500;
    text-align: center;
    line-height: 0.23rem;
}
.code-btn.on{
    span{
        float: left;
        padding-left: 0.1rem;
    }
}
// 验证码按钮
.code-btn{
    position: absolute;
    right:15px;
    top: 50%;
    transform: translate(0,-50%);
    width: 1.25rem;
    height: 0.41rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.2rem;
    color: #fff;
    background-color: #FF7500;
    text-align: center;
    line-height: 0.23rem;
}
.code-btn.on{
    span{
        float: left;
        padding-left: 0.1rem;
    }
}
// 提交按钮
.login-btn{
    padding: 0 0.9rem;
    margin-top: 0.75rem;
    .btn{
        font-size: 0.3rem;
        background-color: #FF9800;
        height: 0.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.2rem;
        color: #fff;
    }
}
.van-button--info{
    border: 1px solid #fff;
}
.card-item{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #646566;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    .card-name{
        width: 1.7rem;
    }
}
</style>